<template>
  <div class="app-container calendar-list-container">
    <basic-container>
      <div class="filter-container">
        <el-button-group>
          <el-button v-if="permissions.sys_tree_all || permissions.dept_add"
                     type="primary"
                     icon="el-icon-plus"
                     @click="handlerAdd(0,'根节点')">添加顶级部门
          </el-button>
          <el-button v-if="permissions.sys_tree_all || permissions.dept_add"
                     type="primary"
                     icon="el-icon-plus"
                     @click="handlerAdd(currentId,currentName)">添加
          </el-button>
          <el-button v-if="permissions.sys_tree_all || permissions.dept_edit"
                     type="warning"
                     icon="el-icon-edit"
                     @click="handlerEdit">编辑
          </el-button>
          <el-button v-if="permissions.sys_tree_all || permissions.dept_del"
                     type="danger"
                     icon="el-icon-delete"
                     @click="handleDelete">删除
          </el-button>
        </el-button-group>
      </div>

      <el-row>
        <el-col :span="8"
                style="margin-top:15px;">
          <el-tree :data="treeData"
                   :props="defaultProps"
                   :filter-node-method="filterNode"
                   class="filter-tree"
                   node-key="id"
                   highlight-current
                   default-expand-all
                   @node-click="getNodeData" />
        </el-col>
        <el-col :span="16"
                style="margin-top:15px;">
          <el-card class="box-card">
            <el-form ref="form"
                     :label-position="labelPosition"
                     :rules="rules"
                     :model="form"
                     label-width="80px">
              <el-form-item label="父级节点"
                            prop="parentId">
                <el-input v-model="form.parentId"
                          disabled
                          placeholder="父级节点" />
              </el-form-item>
              <el-form-item label="父级名称">
                <el-input v-model="form.parentName"
                          disabled
                          placeholder="父级名称" />
              </el-form-item>
              <el-form-item v-if="formStatus != 'create'"
                            label="节点编码">
                <el-input v-model="form.treeId"
                          disabled
                          placeholder="节点编码" />
              </el-form-item>
              <el-form-item label="部门名称"
                            prop="name">
                <el-input v-model="form.name"
                          :disabled="formEdit"
                          placeholder="请输入名称" />
              </el-form-item>
              <el-form-item label="排序"
                            prop="sort">
                <el-input v-model="form.sort"
                          :disabled="formEdit"
                          type="number"
                          placeholder="请输入排序" />
              </el-form-item>
              <el-form-item v-if="formStatus == 'update'">
                <el-button type="warning"
                           @click="update">更新
                </el-button>
                <el-button @click="onCancel">取消</el-button>
              </el-form-item>
              <el-form-item v-if="formStatus == 'create'">
                <el-button type="primary"
                           @click="create">保存
                </el-button>
                <el-button @click="onCancel">取消</el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>
      </el-row>
    </basic-container>
  </div>
</template>

<script>
import { addObj, delObj, fetchTree, getObj, putObj } from '@/api/admin/sys-tree'
import { mapGetters } from 'vuex'

export default {
  name: 'Dept',
  data () {
    return {
      formEdit: true,
      formStatus: '',
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      rules: {
        parentId: [
          { required: true, message: '请输入父级节点', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入部门名称', trigger: 'blur' },
          { min: 3, max: 32, message: '长度在 3 到 32 个字符', trigger: 'blur' }
        ],
        sort: [
          { required: true, message: '请输入排序值', trigger: 'blur' }
        ]
      },
      labelPosition: 'right',
      form: {
        name: undefined,
        sort: undefined,
        parentId: undefined,
        parentName: undefined,
        treeId: undefined,
        treeType: 1
      },
      currentId: 0,
      currentName: '根节点',
    }
  },
  created () {
    this.getList()
  },
  computed: {
    ...mapGetters(['permissions'])
  },
  methods: {
    getList () {
      fetchTree({ treeType: 1 }).then(response => {
        this.treeData = response.data.data || []
      })
    },
    filterNode (value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    getNodeData (data) {
      if (!this.formEdit) {
        this.formStatus = 'update'
      }
      if (data.id == this.currentId) {
        return
      }
      this.currentId = data.id
      this.currentName = data.name
      getObj(data.id).then(response => {
        this.form = response.data.data
      })
    },
    handlerEdit () {
      if (this.currentId === 0) {
        this.onCancel()
        return
      }
      this.formEdit = false
      this.formStatus = 'update'
      getObj(this.currentId).then(response => {
        this.form = response.data.data
      })
    },
    handlerAdd (parentId, parentName) {
      this.resetForm(parentId, parentName)
      this.formEdit = false
      this.formStatus = 'create'
    },
    handleDelete () {
      this.$confirm(`此操作将永久删除${this.currentName}, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delObj(this.currentId).then((resp) => {
          this.currentId = 0
          this.currentName = '根节点'
          this.getList()
          this.resetForm()
          this.onCancel()
          this.$notify.success(resp.data.message)
        })
      })
    },
    update () {
      this.$refs.form.validate((valid) => {
        if (!valid) return
        putObj(this.form).then((resp) => {
          this.getList()
          this.onCancel()
          this.$notify.success(resp.data.message)
        })
      })
    },
    create () {
      this.$refs.form.validate((valid) => {
        if (!valid) return
        addObj(this.form).then((resp) => {
          this.getList()
          this.onCancel()
          this.$notify.success(resp.data.message)
        })
      })
    },
    onCancel () {
      this.formEdit = true
      this.formStatus = ''
    },
    resetForm (parentId, parentName) {
      this.form = {
        name: undefined,
        sort: undefined,
        treeId: undefined,
        treeType: 1,
        parentId: parentId,
        parentName: parentName
      }
    }
  }
}
</script>

